<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #fu {
      width: 400px;
      height: 400px;
      background: blue;
    }

    #zi {
      width: 200px;
      height: 200px;
      background: chartreuse;
    }
  </style>
</head>

<body>
  <div id="fu">
    <div id="zi"> </div>
  </div>
  <script>
    // fu.onclick = function () { }
    var fu = document.getElementById("fu")
    fu.addEventListener("click", function () {
      alert("点击了父元素")
    }, false)
    // 
    var zi = document.getElementById("zi");
    var zifn = function (e) {
      e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
      alert("点击了子元素")
    }
    zi.addEventListener("click", zifn) //绑定事件

    // zi.attachEvent("onclick", zifn)//IE7,8的绑定事件方法

    // addEventListener()方法
    // 这个方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。语法是：
    // addEventListener(event, function, useCapture)
    // 参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。
    // 参数 function 也是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。
    // 参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是 ** 捕获，true表示捕获，默认的false表示冒泡。

    // removeEventListener():不能移除匿名添加的函数。 
    //移除事件  要和绑定事件的参数保持一致
    zi.removeEventListener("click", zifn)
      // zi.detachEvent("onclcik",zifn)//IE7,8的绑定事件方法

  </script>
</body>

</html>